<template>
  <div class="images-container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航组件 -->
        <bread-crumb>素材管理</bread-crumb>
      </div>
      <!-- tabs 标签页 -->
      <el-radio-group
      style="margin-bottom: 30px;"
      v-model="isCollected"
      @change="hSwitchTab">
        <!--v-model 绑定选中当前值的button(高亮)

        label属性: 设置当前项被选中时的值 (注意: 动态属性加:) -->
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <!-- 上传按钮 -->
      <!-- TODO -->
      <el-button type="success" size="mini" style="float:right">
        上传图片素材
      </el-button>
      <!-- 素材列表 - layout布局+图片 -->
      <!-- gutter 属性来指定每一栏之间的间隔 -->
      <el-row :gutter="10">
        <!--span 属性表示24份中占几份-->
        <!-- v-for中key记得写!! -->
        <el-col
        :span="4"
        class="img_item"
        :key="item.id"
        v-for="item in images"
        >
          <el-image
          style="width: 180px; height: 180px"
          :src="item.url"
          fit="cover"></el-image>
          <!-- 操作图标 - 点击'收藏'tab时不显示-->
          <div class="option" v-if="!isCollected">
            <!-- 收藏 -->
            <!-- is_colleted - 请求返回数据, 默认值为true -->
            <span
              class="el-icon-star-off"
              :class="{red: item.is_collected}"
              @click="hChangePick(item)"
            >
            </span>
            <!-- 删除 -->
            <span
            class="el-icon-delete"
            @click="hDelete(item)"
            >
            </span>
          </div>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <!-- page-size 表示根据每页的数据条数 计算总页数 -->
      <el-pagination
        background
        style="margin-top: 16px"
        layout="prev, pager, next"
        :total='totalCount'
        :page-size="12"
        @current-change='hPageChange'>
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'images',
  data () {
    return {
      // 素材列表数据
      images: [],
      // 总数量
      totalCount: 0,
      // 当前页
      page: 1,
      // 是否收藏
      isCollected: false
    }
  },
  created () {
    this.loadImages()
  },
  methods: {
  // 收集组装 参数
    buildParam () {
      const params = {
        collect: this.isCollected, // 收藏的图片
        page: this.page, // 页码
        per_page: 12 // 每页数量
      }
      return params
    },
    // 发送获取 素材数据 请求
    async  loadImages () {
      // 请求接口 参数
      const params = this.buildParam()
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/user/images',
          params
        })
        // console.log(res)
        this.images = res.data.data.results
        console.log(this.images)
        this.totalCount = res.data.data.total_count
      } catch (err) {
        console.log(err)
        // 请求失败
        this.images = []
        this.totalCount = 0
        this.$message.error('获取不了图片呢!')
      }
    },

    // 点击分页 - 自动传当前页
    hPageChange (curPage) {
      // 更新页码
      this.page = curPage
      // 重发请求
      this.loadImages()
    },

    // 点击tab 全部/收藏
    hSwitchTab () {
      // 回到 第一页
      this.page = 1
      // 重发请求
      this.loadImages()
    },

    // 切换收藏 - 发送修改 收藏数据 请求
    async hChangePick (item) {
      try {
        const res = await this.$axios({
          method: 'PUT',
          url: '/mp/v1_0/user/images/' + item.id,
          data: {
            collect: !item.is_collected
          }
        })
        console.log(res)
        // 提示
        const goodMes = item.is_collected ? '取消收藏' : '收藏成功'
        this.$message.success(goodMes)
        // 更新视图
        // -可重发请求(视图会跳)
        // this.loadImages()
        // -可更新本地数据(视图不跳)
        item.is_collected = !item.is_collected
      } catch (err) {
        console.log(err)
        // 提示
        const errMes = item.is_collected('收藏失败')
        this.$message.error(errMes)
      }
    },

    // 删除
    // 发送删除请求
    async doDelete (id) {
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/user/images/' + id
        })
        console.log(res)
        // 重新请求
        this.loadImages()
        this.$message.success({
          type: 'success',
          message: '删除成功!'
        })
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    // 用户点击删除
    hDelete (item) {
      // 弹出提示框
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '吃了这张图',
        cancelButtonText: '再欣赏欣赏',
        type: 'warning'
      }).then(() => {
        // 确定
        // 调用 发送删除请求 函数
        this.doDelete(item.id)
      }).catch(() => {
        // 取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.img_item {
    position: relative;
    box-sizing: border-box;
  }
.option {
    position: absolute;
    left: 5px;
    width:180px;
    bottom: 5px;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
    span {
      margin: 0 30px;
      cursor: pointer;
    }
  }
.red {
    color: red;
  }
</style>
